<template>
  <el-dialog
    :visible.sync="visible"
    :title="!isUpdate ? $t('add') : $t('update')"
    :close-on-click-modal="false"
    :close-on-press-escape="false"
  >
    <el-form
      :model="dataForm"
      :rules="dataRule"
      ref="dataForm"
      label-width="110px"
    >
      <el-form-item v-if="isUpdate" label="指标id" prop="id">
        <el-input
          :disabled="isUpdate"
          v-model="dataForm.id"
          placeholder="请输入指标id"
        />
      </el-form-item>
      <el-form-item label="行业" prop="industry">
        <el-select v-model="dataForm.industry" placeholder="请选择行业名称">
          <el-option
            v-for="item in nameList"
            :key="item"
            :value="item"
            :label="item"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="一级模块" prop="industryType">
        <el-select
          v-model="dataForm.industryType"
          placeholder="请选择一级模块"
          @change="handleIndustyTypeChange"
        >
          <el-option
            v-for="item in firstModules"
            :key="item.id"
            :value="item.name"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="二级模块" prop="moduleId">
        <el-select v-model="dataForm.moduleId" placeholder="请选择二级模块">
          <el-option
            v-for="item in secondModules"
            :key="item.id"
            :value="item.id"
            :label="item.name"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="指标名称" prop="quotaName">
        <el-input v-model="dataForm.quotaName" placeholder="请输入指标名称" />
      </el-form-item>
      <el-form-item label="责任单位">
        <el-input v-model="dataForm.department" placeholder="请输入责任单位" />
      </el-form-item>
      <el-form-item label="指标排序" prop="quotaSort">
        <el-input-number
          v-model="dataForm.quotaSort"
          placeholder="请输入指标排序"
          :min="0"
          :step="1"
        />
      </el-form-item>
      <el-form-item label="分析维度">
<!--        <el-checkbox v-model="dataForm.hotmap" :true-label="1" :false-label="0">-->
<!--          区市分布（热力图）-->
<!--        </el-checkbox>-->
        <!-- <el-checkbox
          v-model="dataForm.pointMap"
          :true-label="1"
          :false-label="0"
        >
          区市分布（点位图）
        </el-checkbox> -->
        <el-checkbox
          v-model="dataForm.timeTrend"
          :true-label="1"
          :false-label="0"
        >
          趋势变化
        </el-checkbox>
        <el-checkbox
          v-model="dataForm.category"
          :true-label="1"
          :false-label="0"
        >
          结构分析
        </el-checkbox>
        <el-checkbox
          v-model="dataForm.detailList"
          :true-label="1"
          :false-label="0"
        >
          明细清单
        </el-checkbox>
        <el-checkbox
          v-model="newCheck"
          :true-label="1"
          :false-label="0"
          disabled
        >
          区市分布
        </el-checkbox>
      </el-form-item>

      <!-- <el-form-item
        label="趋势变化展示条数"
        prop="quotaLimit"
        v-if="dataForm.timeTrend == 1"
      >
        <el-input-number
          :min="0"
          :max="dataForm.maxLimit"
          v-model="dataForm.quotaLimit"
        />
      </el-form-item> -->
      <el-form-item label="正负类型" prop="quotaType">
        <el-radio-group v-model="dataForm.quotaType">
          <el-radio :label="0">正</el-radio>
          <el-radio :label="1">负</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="更新频率" prop="update">
        <ren-select
          v-model="dataForm.update"
          dict-type="quotaUpdateFrequency"
          placeholder="更新频率"
        ></ren-select>
      </el-form-item>
      <el-form-item label="数据来源" prop="dataSourceType">
        <ren-select
          v-model="dataForm.dataSourceType"
          dict-type="quotaSourceType"
          placeholder="数据来源"
        />
      </el-form-item>
      <el-form-item label="首页展示" prop="isDisplay">
        <el-radio-group v-model="dataForm.isDisplay">
          <el-radio :label="1">是</el-radio>
          <el-radio :label="0">否</el-radio>
        </el-radio-group>
      </el-form-item>
      <el-form-item label="同比/环比展示" prop="yoyMom">
        <el-radio-group v-model="dataForm.yoyMom">
          <el-radio label="1">同比</el-radio>
          <el-radio label="2">环比</el-radio>
        </el-radio-group>
      </el-form-item>
      <!-- <el-form-item label="移动端展示" prop="mobileLayout">
        <el-radio-group v-model="dataForm.mobileLayout">
          <el-radio label="1">1</el-radio>
          <el-radio label="1/2">1/2</el-radio>
          <el-radio label="1/3">1/3</el-radio>
        </el-radio-group>
      </el-form-item> -->
      <el-form-item label="状态" prop="delFlag">
        <el-radio-group v-model="dataForm.delFlag">
          <el-radio :label="0">正常</el-radio>
          <el-radio :label="1">停用</el-radio>
        </el-radio-group>
      </el-form-item>
    </el-form>
    <template slot="footer">
      <el-button @click="visible = false">{{ $t("cancel") }}</el-button>
      <el-button type="primary" @click="dataFormSubmitHandle()">{{
        $t("confirm")
      }}</el-button>
    </template>
  </el-dialog>
</template>

<script>
import debounce from 'lodash/debounce'

function createForm () {
  return {
    dataSourceType: '', //	数据来源	query	true	string
    delFlag: 0, //  状态	query	true	string
    id: '', //  id	query	true	string
    industry: '', //  行业	query	true	string
    industryType: '', //  一级模块	query	true	string
    isDisplay: 0, //  首页展示（0：否 1：是）	query	true	string
    moduleId: '', //  二级模块	query	true	string
    quotaName: '', //	指标名称	query	true	string
    quotaSort: 0, //	指标排序	query	true	string
    quotaType: 0, //	正负类型（0：正 1：负）	query	true	string
    update: '', //  更新频率	query	true	string
    category: 0, //  结构分析（0：否 1：是）	query	false	string
    detailList: 0, //	明细清单（0：否 1：是）	query	false	ref
    hotmap: 0, //  区市分布（热力图）（0：否 1：是）	query	false	string
    pointMap: 0, //  区市分布（点位图）（0：否 1：是）	query	false	string
    timeTrend: 0, //	趋势变化（0：否 1：是）	query	false	string
    // quotaLimit: null, // 展示条数
    // maxLimit: null, //quotaLimit条数限制
    yoyMom: '同比', // 同比/环比展示
    mobileLayout: '1', // 移动端展示
    department: '',
  }
}

const URL_ADD = '/cgjybzIndustry/insRelation'
const URL_UPDATE = '/cgjybzIndustry/updRelation'

const URL_GETNAME = '/cgjybzIndustry/getModuleName' // 获取二级模块名

export default {
  props: {
    nameList: Array,
    moduleTree: Array
  },
  data () {
    return {
      visible: false,
      roleList: [],
      roleIdListDefault: [],
      postList: [],
      dataForm: createForm(),
      secondModules: [],
      isUpdate: false,
      newCheck: 1
    }
  },
  computed: {
    dataRule () {
      return {
        id: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'blur'
          }
        ],

        industry: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'change'
          }
        ],

        industryType: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'change'
          }
        ],

        isDisplay: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'change'
          }
        ],

        moduleId: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'change'
          }
        ],

        quotaName: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'blur'
          }
        ],
        quotaSort: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'blur'
          }
        ],
        quotaType: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'blur'
          }
        ],
        update: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'change'
          }
        ],
        dataSourceType: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'change'
          }
        ],
        category: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'change'
          }
        ],
        detailList: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'change'
          }
        ],
        hotmap: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'change'
          }
        ],
        pointMap: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'change'
          }
        ],
        timeTrend: [
          {
            required: true,
            message: this.$t('validate.required'),
            trigger: 'change'
          }
        ]
      }
    },
    firstModules () {
      if (this.dataForm.industry) {
        const m = this.moduleTree.find((t) => this.dataForm.industry)
        return m ? m.children : []
      }
      return []
    }
  },
  methods: {
    handleIndustyTypeChange () {
      this.dataForm.moduleId = ''
      this.fetchSecondModuleNames()
    },
    init (row) {
      this.isUpdate = !!row
      console.log(this.isUpdate)
      if (row) {
        this.dataForm.id = row.id
        this.dataForm.industry = row.industryName
        this.dataForm.industryType = row.industryType
        this.dataForm.moduleId = row.moduleId
        this.dataForm.quotaName = row.quotaName
        this.dataForm.department = row.department
        this.dataForm.quotaSort = +row.quotaSort || 0
        this.dataForm.dataSourceType = row.dataSourceType || ''
        this.dataForm.delFlag = +row.delFlag || 0
        this.dataForm.isDisplay = +row.isDisplay || 0
        this.dataForm.quotaType = +row.quotaType || 0
        this.dataForm.update = row.dataUpdateFrequency || ''
        this.dataForm.category = +row.categoryAnalysis || 0
        this.dataForm.detailList = +row.detailList || 0
        this.dataForm.hotmap = +row.districtAnalysisHotmap || 0
        this.dataForm.pointMap = +row.districtAnalysisPointMap || 0
        this.dataForm.timeTrend = +row.timeTrend || 0
        // this.dataForm.quotaLimit = row.quotaLimit;
        // this.dataForm.maxLimit = row.maxLimit;
        this.dataForm.yoyMom = row.yoyMom || ''
        this.dataForm.mobileLayout = row.mobileLayout || ''
        this.fetchSecondModuleNames()
      }
      this.visible = true
      this.$nextTick(() => {
        this.$refs.dataForm.clearValidate()
      })
    },
    getInfo () {},
    fetchSecondModuleNames () {
      this.$http
        .post(URL_GETNAME, null, {
          params: {
            name: this.dataForm.industry,
            typeStr: this.dataForm.industryType
          }
        })
        .then(({ data: resp }) => {
          console.log(resp)
          this.secondModules = resp.data
        })
    },
    // 表单提交
    dataFormSubmitHandle: debounce(
      function () {
        this.$refs.dataForm.validate((valid) => {
          if (!valid) {
            return false
          }
          const params = {
            ...this.dataForm
          }
          delete params.industryType
          this.$http
            .post(this.isUpdate ? URL_UPDATE : URL_ADD, null, {
              params
            })
            .then(({ data: res }) => {
              this.$message({
                message: this.$t('prompt.success'),
                type: 'success',
                duration: 500,
                onClose: () => {
                  this.visible = false
                  this.dataForm = createForm()
                  this.$emit('refreshDataList')
                }
              })
            })

          // if (res.code !== 0) {
          //   return this.$message.error(res.msg);
          // }
          // this.$message({
          //   message: this.$t("prompt.success"),
          //   type: "success",
          //   duration: 500,
          //   onClose: () => {
          //     this.visible = false;
          //     this.$emit("refreshDataList");
          //   },
          // });
        })
      },
      1000,
      { leading: true, trailing: false }
    )
  }
}
</script>

<style lang="scss">
.mod-sys__user {
  .role-list {
    .el-select {
      width: 100%;
    }
  }
}
</style>
